

<template>
  <view class="Mall4j recharge-container">
    <view v-if="rechargeList.length" class="">
      <!-- swiper -->
      <swiper class="swiper" :current="currentSwiper" :indicator-dots="indicatorDots" :autoplay="autoplay" circular="true" :vertical="vertical" :interval="interval" :duration="duration" :previous-margin="previousMargin+'px'" :next-margin="nextMargin + 'px'" @change="swiperChange">
        <block v-for="(item,index) in rechargeList" :key="index">
          <swiper-item class="banner-item">
            <view class="img-box">
              <!-- <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/label.png" class="label"></image> -->
              <image :src="picDomain + item.img" class="banner" />
              <view class="item-content">
                <view class="lt">
                  <view class="amount">{{ item.rechargeAmount }}<text class="small">{{ i18n.yuan }}</text></view>
                  <view class="gifts">{{ i18n.recharge + item.rechargeAmount + i18n.yuan + ' ' }}
                    <text v-if="item.presAmount">{{ ' ' + i18n.handsel + item.presAmount + i18n.yuan }}；</text>
                    <text v-if="item.presGrowth || item.presScore || item.couponList.length > 0">{{ i18n.handsels }}</text>
                    <text v-if="item.presGrowth">{{ item.presGrowth + i18n.growthValue }}；</text>
                    <text v-if="item.presScore">{{ item.presScore + i18n.integral }}；</text>
                    <view v-if="item.couponList.length > 0">{{ item.couponList.length + i18n.sheet + i18n.coupon }}:
                      【<block v-for="(cou,couIdx) in item.couponList" :key="couIdx">
                        {{ cou.couponName }} <text v-if="couIdx != item.couponList.length-1">、</text>
                      </block>】
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- </view> -->
          </swiper-item>
        </block>
      </swiper>
      <!--  实现点击选中样式  -->
      <view class="dots scroll">
        <block v-for="(item,idx) in rechargeList" :key="idx">
          <view class="dot-item" :data-current="idx" @tap="swichNav">
            <view class="dot-txt">{{ item.rechargeAmount + i18n.yuan }}</view>
            <view :class="['dot', idx == currentSwiper ? ' active' : '']" />
          </view>
        </block>
      </view>
      <!-- end swiper -->
      <view class="ways">
        <view class="payment-txt">{{ i18n.paymentMethod }}</view>
        <radio-group @change="handlePayTypeChange">
          <!-- #ifdef H5 -->
          <label>
            <!-- ALIPAY_H5: 6, 支付宝H5支付 -->
            <view v-if="!isWechat" class="item" @tap="payType = PayTypeConstant.ALIPAY_H5">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/alipay.png" mode="" />
                </view>
                <view class="name">{{ i18n.PayWithAli }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.ALIPAY_H5" />
              </view>
            </view>
          </label>
          <label>
            <!-- WECHATPAY_H5: 4, 微信H5支付 -->
            <view v-if="!isWechat && !isAli" class="item" @tap="payType = PayTypeConstant.WECHATPAY_H5">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                </view>
                <view class="name">{{ i18n.payWithWeChat }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.WECHATPAY_H5" />
              </view>
            </view>
          </label>
          <label>
            <!-- WECHATPAY_MP: 5, 微信公众号支付 -->
            <view v-if="isWechat && !isAli" class="item" @tap="payType = PayTypeConstant.WECHATPAY_MP">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                </view>
                <view class="name">{{ i18n.payWithWeChat }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.WECHATPAY_MP" />
              </view>
            </view>
          </label>
          <!-- <view class="item" >
            <view class="pay-name">
              <view class="img"><image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/unionpay.png" mode=""></image></view>
              <view class="name">银行卡快捷支付</view>
            </view>
            <view class="check">
              <radio></radio>
            </view>
          </view> -->

          <!-- PayPal支付 -->
          <!-- PAYPAL: 10, PayPal支付 -->
          <!-- <label>
            <view class="item" @tap="payType = PayTypeConstant.PAYPAL">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/paypal-logo.png" mode=""></image>
                </view>
                <view class="name">{{i18n.paypalPay}}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.PAYPAL"></radio>
              </view>
            </view>
          </label> -->
          <!-- PayPal支付 end -->

          <!-- #endif -->

          <!-- #ifdef APP-PLUS -->
          <label>
            <!-- ALIPAY_APP: 7, 支付宝APP支付 -->
            <view class="item" @tap="payType = PayTypeConstant.ALIPAY_APP">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/alipay.png" mode="" />
                </view>
                <view class="name">{{ i18n.PayWithAli }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.ALIPAY_APP" />
              </view>
            </view>
          </label>

          <label>
            <!-- WECHATPAY_APP: 8, 微信APP支付 -->
            <view class="item" @tap="payType = PayTypeConstant.WECHATPAY_APP">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                </view>
                <view class="name">{{ i18n.payWithWeChat }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.WECHATPAY_APP" />
              </view>
            </view>
          </label>
          <!-- #endif -->

          <!-- #ifdef MP-WEIXIN -->
          <label>
            <!-- WECHATPAY: 1, 小程序支付 -->
            <view class="item" @tap="payType = PayTypeConstant.WECHATPAY">
              <view class="pay-name">
                <view class="img">
                  <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/wxpay.png" mode="" />
                </view>
                <view class="name">{{ i18n.payWithWeChat }}</view>
              </view>
              <view class="check">
                <radio :checked="payType==PayTypeConstant.WECHATPAY" />
              </view>
            </view>
          </label>
          <!-- #endif -->
        </radio-group>
      </view>

      <view class="btn-box">
        <view class="btn" @tap="toPay">{{ i18n.needToPay + amount + i18n.yuan }}</view>
      </view>
    </view>
    <view v-if="!rechargeList.length && loaded" class="empty-con">
      <view class="empty">
        <view class="empty-icon">
          <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/empty.png" />
        </view>
        <view class="empty-text">{{ i18n.rechangeListEmptyTip }}</view>
      </view>
      <view class="btn-row">
        <view class="btn home-btn" @tap="routeTo('home')">{{ i18n.homepage }}</view>
        <view class="btn prev-btn" @tap="routeTo('')">{{ i18n.backToPrev }}</view>
      </view>
    </view>
  </view>
</template>

<script>
var http = require('../../utils/http.js')
import { PayType, AppType } from '../../utils/constant.js'
import config from '../../utils/config.js'
import Wechat from '../../utils/wechat.js'
import Pay from '../../utils/pay.js'

export default {
  data () {
    return {
      isWechat: false, // 是否为微信环境
      payType: PayType.ALIPAY_H5, // 支付类型，默认支付宝
      PayTypeConstant: PayType, // 支付类型常量
      indicatorDots: false, //  是否显示面板指示点
      autoplay: false, // 是否自动切换
      circular: true, // 是否采用衔接滑动
      vertical: false, // 是否垂直衔接滑动
      interval: 4000, // 自动切换时间间隔
      duration: 200, // 滑动动画时长
      previousMargin: 20,
      nextMargin: 20,
      displayMultipleItems: 3,
      currentSwiper: 0,

      rechargeList: [], // 充值数据列表
      picDomain: config.picDomain, // 图片前缀
      amount: 0, // 选中金额
      isAli: false, // 是否支付宝H5环境内
      loaded: false,
      balance: ''
    }
  },
  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  onShow: function () {
    uni.setNavigationBarTitle({
      title: this.i18n.rechargeBalance
    })
  },

  onLoad: function () {
    // #ifdef H5
    this.isWechat = Wechat.isWechat()
    // #endif
    // #ifdef APP-PLUS
    this.isWechat = false
    this.payType = PayType.ALIPAY_APP
    // #endif
    // #ifdef MP-WEIXIN
    this.isWechat = false
    this.payType = PayType.WECHATPAY
    // #endif
    if (this.isWechat) {
      // 如果是微信环境打开h5,使用公众号支付
      this.payType = PayType.WECHATPAY_MP
    }

    this.isAli = uni.getStorageSync('appType') == AppType.ALI // 是否支付宝内环境

    this.queryRechargeDataList() // 获取充值数据列表
  },

  methods: {
    swiperChange: function (e) {
      this.currentSwiper = e.detail.current
      this.amount = this.rechargeList[this.currentSwiper].rechargeAmount // 改变轮播图选中金额
      this.balanceId = this.rechargeList[this.currentSwiper].balanceId // 改变轮播图选中充值id
      this.balance = this.rechargeList[this.currentSwiper]
    },
    /**
      * 点击tab切换
      */
    swichNav: function (e) {
      if (this.currentSwiper === e.currentTarget.dataset.current) {
        return false
      } else {
        this.currentSwiper = e.currentTarget.dataset.current
      }
    },

    /**
     * 获取充值数据列表
     */
    queryRechargeDataList: function () {
      var params = {
        url: '/p/userBalance/getList',
        method: 'GET',
        data: {},
        callBack: res => {
          if (res.length) {
            this.rechargeList = res
            this.amount = this.rechargeList[0].rechargeAmount // 初始选中金额
            this.balanceId = this.rechargeList[0].balanceId // 初始选中充值id
            this.balance = this.rechargeList[0]
          }
          this.loaded = true
        }
      }
      http.request(params)
    },

    /**
     * 修改支付类型
     */
    handlePayTypeChange (e) {
      console.log(this.PayTypeConstant.ALIPAY_H5)
    },

    // 去支付
    toPay: function () {
      console.log('payType:', this.payType, '；', 'balanceId:', this.balance)
      Pay.toOrderPay(this.payType, '', '', '', '', this.balance)
    },

    /**
     * 路由跳转
     * @param {String} type 类型
     */
    routeTo (type) {
      if (type === 'home') {
        this.$Router.pushTab('/pages/index/index')
      } else {
        uni.navigateBack({
          delta: 1
        })
      }
    }

  }
}
</script>

<style scoped>
@import "./recharge-balance.css";
@import "../../components/empty-tips/index.css";
</style>
